<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>我的信息</title>
	<link rel="stylesheet" type="text/css" href="css/myinfo.css">

<link rel="stylesheet" href="js/myinfo/layui/css/layui.css" />
<link rel="stylesheet" href="js/myinfo/eleme-ui/index.css" />
<link rel="stylesheet" href="css/myinfo/ShoppingCart.css" />
	<script>
//For Demo only
var links = document.getElementsByClassName('link')
for(var i = 0; i <= links.length; i++)
   addClass(i)


function addClass(id){
   setTimeout(function(){
      if(id > 0) links[id-1].classList.remove('hover')
      links[id].classList.add('hover')
   }, id*750) 
}
</script>
	<script type="text/javascript" src="js/myinfo/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$(".text1").click(function(){
			$(".tabCon1").addClass("tabshow");
			$(".tabCon2").removeClass("tabshow");
			$(".tabCon3").removeClass("tabshow");
		})
		$(".text2").click(function(){
			$(".tabCon1").removeClass("tabshow");
			$(".tabCon2").addClass("tabshow");
			$(".tabCon3").removeClass("tabshow");
		})
		$(".text3").click(function(){
			$(".tabCon1").removeClass("tabshow");
			$(".tabCon2").removeClass("tabshow");
			$(".tabCon3").addClass("tabshow");
		})
	})
	</script>

</head>
<body>
<script type="text/javascript">
$(function(){
	$(".navli").mouseover(function(){
		$(this).addClass("navlishow")

	})
	$(".navli").mouseout(function(){
		$(this).removeClass("navlishow")
		
	})
})
</script>
	<div class="header">
	<div class="logo"></div>
	<div class="nav">
	<ul>
		<li class="navli"><a href="">茶具商店</a></li>
		<li class="navli"><a href="">联系我们</a></li>
		<li class="navli"><a href="">招商加盟</a></li>
		<li class="navli"><a href="">营销服务</a></li>
		<li class="navli"><a href="">新闻中心</a></li>
		<li class="navli"><a href="">茶品展示</a></li>
		<li class="navli"><a href="">品牌文化</a></li>
		<li class="navli"><a href="">茶坊首页</a></li>

	</ul>
	</div>
	<div class="login">
	<ul>
		<li class=""><a href="register.jsp">注册</a></li>
		<li class="">/</li>
		<li class=""><a href="Wopop.jsp">登陆</a></li>
		<li class="">&nbsp</li>
		<li class="">&nbsp</li>
		<li class=""><a href="">#</a></li>
	</ul>
	</div>
	</div>
	<div class="center">
	<div class="centertop">
	<p>当前位置 > 我的信息 > 全部：<p>
	</div>
	<div class="centerleft">
	<div class="container">
  <div class="link">
    <div class="text">我的信息</div>
  </div>
  <div class="link">
    <div class="text1">个人信息</div>
  </div>
  <div class="link">
    <div class="text2">我的订单</div>
  </div>
  <div class="link">
    <div class="text3">购物车</div>
  </div>
  <div class="link">
    <div class="text4">我的收藏</div>
  </div>
  <div class="link">
    <div class="text5">我的评价</div>
  </div>
</div>
	</div>
	<div class="centerchange">
		<div class="tabCon1">
		<form class="userinfo" action="">
		<h1 style="font-size:25px;color:#886">维护个人信息</h1>
		<table>
		<tr>
			<td>真实姓名：</td><td><input type="text" name="realname"></td>
		</tr>
		<tr>
			<td>手机号码：</td><td><input type="text" name="phone"></td>
		</tr>
		<tr>
			<td>电子邮箱：</td><td><input type="text" name="email"></td>
		</tr>
		<tr>
			<td>证件类型：</td><td><option name="certtype"><select></select></option></td>
		</tr>
		<tr>
			<td>证件号码：</td><td><input type="text" name="certno"></td>
		</tr>
		<tr>
			<td>详细地址：</td><td><input type="text" name="address"></td>
		</tr>
		
		</table>
		<input type="submit" name="submit" value="提交" style="margin-top:50px;margin-left:80px;">
		<input type="reset" name="reset" value="重置" style="margin-top:50px;margin-left:80px;">
		</form>


		</div>
		<div class="tabCon2">
		<form>
		<table>
			<th>订单编号</th>
			<th>图片</th>
			<th>茶叶名</th>
			<th>规格</th>
			<th>数量</th>
			<th>总价</th>
			<th>地址</th>
			<th>状态</th>
			<th>操作</th>
			<tr>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
				<td>@</td>
			</tr>
		</table>
		</form>
		</div>

 	 	<div class="tabCon3">
<div class="row " id="myVue" v-cloak>
	<div class="col-lg-10 col-lg-offset-1" >
		<div class="layui-form">
			<table class="ShopCartTable layui-table">
				<thead>
					<tr>
						<th class="selectLeft">
							<template>
								<el-checkbox  @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
							</template>
							<span class="selectLeftGoods">商品或服务名称</span>
						</th>
						<th>单价</th>
						<th>数量</th>
						<th>小计</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(tabledatas,index) in shopTableDatas">
						<td  class="selectLeft">
							<template>
								<el-checkbox @change="checkedRadioBtn(tabledatas)" v-model="tabledatas.checked"></el-checkbox>
							</template>
							<span class="goodName">
								<img src="img/show1.jpg">
							</span>
							<span class="goodName goodsName">
								<h2 class="goodname" v-text="tabledatas.name" style="color:black"></h2>
								<p class="goodGary">
									<span>供应商：</span>
									<span >？</span>
								</p>
								<p class="goodGary">
									<span>发货地：</span>
									<span >？</span>
								</p>
							</span>
						</td>
						<td class="danPrice" style="color:orange">{{tabledatas.price | moneyFiler}}</td>
						<td>
							<i @click="goodNum(tabledatas,-1)" class="fa  deleteBtn" aria-hidden="true">-</i>
							<input v-model="tabledatas.num" type="text" class="form-control numInput" aria-label="...">
							<i @click="goodNum(tabledatas,1)" class="fa  addBtn" aria-hidden="true">+</i>
						</td>
						<td>
							<p class="totalPrice">{{tabledatas.price*tabledatas.num | moneyFiler}}</p>
						</td>
						<td class="gongneng">
							<p class="deletegoods" @click="alertRadio(index)">删除</p>
							<p @click="alertmovesSavegoods(index)">移到我的收藏</p>
							<template v-if="tabledatas.saveandremove">
								<p @click="tabledatas.saveandremove = false">加入收藏</p>
							</template>
							<template v-else>
								<p :class="{'saveCheck':!tabledatas.saveandremove}" @click="tabledatas.saveandremove = true">取消收藏</p>
							</template>
						</td>
					</tr>
				</tbody>
			</table>
			<div class="row tablefooter">
				<template>
					<el-checkbox style="padding-left:16px" @change="checkedAllBtn(checkedAll)" v-model="checkedAll">全选</el-checkbox>
				</template>
				<span class="removeMuch" @click="alertMuch">删除选中的商品或服务</span>
				<span class="removeSaves" @click="alertMuchgoods">移到我的收藏</span>
				<span class="servicenum">已选择<span class="goodsNum">{{goodsNum}}</span>件商品<span class="goodsNum">{{serviceNum}}</span>项服务</span>
				<span class="totalclassPoin">总价：<span class="totalMoneyClass">{{totalMoney | moneyFiler}}</span></span>
				<span @click="saveData" class="SettlementBtn">去结算</span>
			</div>
		</div>
	</div>
</div>
</form>
<!--js类引用-->
<script type="text/javascript" src="js/vue/vue.min.js" ></script>
<script type="text/javascript" src="js/eleme-ui/index.js" ></script>
<script type="text/javascript" src="js/ShoppingCart.js" ></script></div>
  		<p><a href="#">上一页</a> <a href="#">下一页</a> <a href="#">末页</a> </p>
	</div>
	</div>


	<div class="footter" >
		
	</div>
</body>
</html>